<!-- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0

ABOUT THIS NODE.JS EXAMPLE: This example works with the AWS SDK for JavaScript version 3 (v3),
which is available at https://github.com/aws/aws-sdk-js-v3. This example is in the 'AWS SDK for JavaScript v3 Developer Guide' at
https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/video-analyzer.html.

Purpose:
index.html is front end HTML for a tutorial demonstrating how to build a web app that analyzes videos for label detection using the
JavaScript SDK for JavaScript v3.
-->

<!-- snippet-start:[rekognition.HTML.video-analyzer.complete]-->
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
  <head th:fragment="site-head">
    <meta charset="UTF-8" />
    <link rel="icon" href="../public/images/favicon.ico" />
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="./js/main.js"></script>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <link
      rel="stylesheet"
      href="../css/styles.css"
      th:href="@{/css/styles.css}"
    />
    <link
      rel="icon"
      href="../images/favicon.ico"
      th:href="@{/images/favicon.ico}"
    />
    <link
      href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  </head>
  <body>
    <div id="upload">
      <div class="container">
        <h2>AWS Video Analyzer application</h2>
        <p>Upload a video to an Amazon S3 bucket that will be analyzed!</p>
        <form>
          <input id="videoupload" type="file" name="file" /><br /><br />
          <button id="addvideo" onclick="uploadVideo()">Add video</button>
        </form>
        <div>
          <br />
          <p>
            Choose the following button to get information about the video to
            analyze.
          </p>
          <button onclick="getVideo()">Show Video</button>
          <table id="myTable" class="display" style="width: 100%">
            <thead>
              <tr>
                <th>Name</th>
                <th>Owner</th>
                <th>Date</th>
                <th>Size</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td id="videoname">No Data</td>
                <td id="videoowner">No Data</td>
                <td id="videodate">No Data</td>
                <td id="videosize">No Data</td>
              </tr>
            </tbody>
            <div id="success3"></div>
          </table>
        </div>
      </div>
    </div>
    <div id="analyze">
      <div class="container">
        <p>
          You can generate a report that analyzes a video in an Amazon S3
          bucket. You can send the report to the following email address.
        </p>
        <label for="email">Email address:</label><br />
        <input type="text" id="email" name="email" value="" /><br />
        <div>
          <br />
          <p>
            Click the following button to analyze the video and obtain a report
          </p>
          <button id="button" onclick="ProcessImages()">Analyze Video</button>
        </div>
        <div id="spinner">
          <p>Report is being generated:</p>
        </div>
      </div>
    </div>
    <script src="./js/main.js"></script>
  </body>
</html>
<!-- snippet-end:[rekognition.HTML.video-analyzer.complete]-->
